<template>
  <div class="reportBox">
    <p class="legendBox flex">
      <span>合格数量</span>
      <span>质检数量</span>
      <span>生产数量</span>
    </p>
    <el-carousel indicator-position="outside" trigger="click"
      arrow="never" :loop="true" :interval="10000">
      <el-carousel-item v-for="(items, index) in barData" :key="index">
        <div class="reportGroup flex_wb">
          <div class="reportItem flex_cb" v-for="(item, itemIndex) in items" :key="item.id">
            <p>{{item.date}}</p>
            <div :id="itemIndex" class="barBox flex_b">
              <ve-bar :height="height" :width="width" v-for="(bar, barIndex) in item.bar" 
                :key="barIndex" :data="bar.data" :legend="legend" :title="title" 
                :grid="grid" :xAxis="xAxis" :yAxis="barIndex == 0 ? yAxis1: yAxis2"
                :colors="colors" >
              </ve-bar>
            </div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
  export default {
    name: 'Report',

    data () {
      return {
        barData: [                              //报告数据
          {
            id: 1,
            date: '2018-11-19',
            bar: [
              {
                schedule: '123',
                data: [{ 'date': '', 'createCount': 1393, 'testCount': 1093, 'qualifiedCount': 320 }]
              },
              {
                schedule: '124',
                data: [{ 'date': '', 'createCount': 1393, 'testCount': 1093, 'qualifiedCount': 320 }]
              },
            ]
          },
        ],

        timeOut: '',                          //计时器
        width: '',                            //任务box的width
        height: '',                           //任务box的height
        chartData: {                          //柱状图数据
          columns: ['date', 'createCount', 'testCount', 'qualifiedCount'],
          rows: []
        },
        //柱状图配置
        title: {
          text: '',
          left: '6%',
          top: '7%',
          textStyle: {
            color: "#fff",
            fontWeight: 500,
            fontSize: 15,
          }
        },
        legend: {show:false},
        grid: {
          width: '90%',
          height: '65%',
          top: 35,
          left: 20,
        },
        xAxis: {
          type : 'value',
          show: true,
          boundaryGap: false,
          axisLine:{ show: true,
            lineStyle: { color: "#25b6df", width: 2 }
          },
          axisTick: { show:false },
          axisLabel: { color: "#fff" },
          splitLine: {lineStyle:{color: "#29649d"}}
        },
        yAxis1: {
          name: '早',
          nameTextStyle: {color: "#7ecef4", fontSize: 14},
          nameGap: 5,
          type : 'category',
          show: true,
          axisLine:{ show: true,
            lineStyle: { color: "#25b6df", width: 2 }
          },
        },
        yAxis2: {
          name: '晚',
          nameTextStyle: {color: "#7ecef4", fontSize: 14},
          nameGap: 5,
          type : 'category',
          show: true,
          axisLine:{ show: true,
            lineStyle: { color: "#25b6df", width: 2 }
          },
        },
        colors: ['#fdb984','#39c7c8', '#b6a3dc']
      }
    },

    created () {
      let that = this;
      that.$nextTick(() => {
        let box = document.getElementById('0');
        that.width = box.clientWidth/2.05 + 'px';
        that.height = box.clientHeight + 'px';
      });

      // that.loadData();                                        //接口确定后解开

      that.timeOut = setInterval(function(){
        that.loadData()
      },60*60*1000);

      that.barData.map(item => {                                  //接口确定后删除
        item.bar.map(bar => {
          that.chartData.rows = bar.data;
          bar.data = that.chartData;
          that.title.text = bar.schedule;
          bar.schedule = that.title;
        })
      });
      let data = [];
      for(var i = 0, len = that.barData.length; i < len;i += 3){  //接口确定后删除
        data.push(that.barData.slice(i,i + 3));
      }
      that.barData = data;
    },

    destroyed () {
      clearInterval(this.timeOut)
    },

    methods: {
      loadData () {
        let that = this;
        let data = [];
        axios.post(this.host+'')
        .then(res=>{
          // console.log(res.data);                              //接口确定后解开
          // that.barData = res.data;
          // that.barData.map(item => {
          //   item.bar.map(bar => {
          //     that.chartData.rows = bar.data;
          //     bar.data = that.chartData
          //   })
          // });
          // for(var i = 0, len = that.chartData.length; i < len;i += 3){
          //   data.push(that.chartData.slice(i,i + 3));
          // }
          // that.chartData = data;
        })
        .catch(error=>{
          console.log(error);
        });
      }
    }
  }
</script>

<style scoped>
  .reportBox{
    width: 100%;
    height: 100%;
  }

  .reportGroup{
    width: 100%;
    height: 100%;
  }
  .legendBox{
    margin: 0;
    flex-direction: row-reverse;
    color: #fff;
    font-size: 13px;
  }
  .legendBox span{
    display: inline-block;
  }
  .legendBox span::before{
    content: '';
    width: 12px;
    height: 12px;
    margin: 0 10px 0 25px;
    display: inline-block;
    position: relative;
    top: 2px;
    border-radius: 6px;
  }
  .legendBox span:first-child::before,.shaftBar div.yellow{
    background-color: #b6a3dc;
  }
  .legendBox span:nth-child(2)::before,.shaftBar div.red{
    background-color: #39c7c8;
  }
  .legendBox span:nth-child(3)::before,.shaftBar div.blue{
    background-color: #fdb984;
  }
  .reportItem{
    width: 100%;
    height: 31%;
  }
  .reportItem p{
    margin: 0;
    color: #7ecef4;
    font-size: 15px;
  }
  .reportItem .barBox{
    width: 100%;
    margin-top: 8px; 
    height: calc(100% - 26px);
    border-radius: 8px;
    background: #2a4261;
    /* Old browsers */
    background: -moz-linear-gradient(150deg, #2b4e6a 0%, #2d3c5b 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #2b4e6a), color-stop(100%, #2d3c5b));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(150deg, #2b4e6a 0%, #2d3c5b 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(150deg, #2b4e6a 0%, #2d3c5b 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(150deg, #2b4e6a 0%, #2d3c5b 100%);
    /* IE10+ */
    background: linear-gradient(150deg, #2b4e6a 0%, #2d3c5b 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#2b4e6a, endColorstr=#2d3c5b, GradientType=1);
    /* IE6-9 fallback on horizontal gradient */  
  }
</style>


